<template>
  <div class="layout">
    <!-- 头部 -->
    <manheader></manheader>
    
    <!-- 主体内容 -->
    <div class="main">
      <!-- 侧边栏 -->
      <manaside></manaside>
      
      <!-- 子路由内容区域 -->
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
    

    <!-- <div class="footer">
      Footer content goes here
    </div> -->
  </div>
</template>

<script>
import manheader from "@/components/manheader.vue";
import manaside from "@/components/manaside.vue";

export default {
  components: {
    manheader,
    manaside
  }
};
</script>

<style scoped>
/* 设置整体布局 */
.layout {
  display: flex;
  flex-direction: column; /* 头部在上，主体区域在下 */
  height: 100vh; /* 页面高度填满 */
}

/* 头部部分 */
.manheader {
  height: 60px;  /* 设定头部高度 */
  background-color: #333; /* 示例背景色 */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 主体部分 */
.main {
  display: flex; /* 使用flex布局，确保侧边栏和内容并排 */
  flex: 1; /* 主体部分占满剩余空间 */
  overflow: hidden; /* 防止溢出 */
}

/* 侧边栏部分 */
.manaside {
  width: 200px;  /* 侧边栏固定宽度 */
  background-color: #f4f4f4;
  padding: 10px;
  height: 100%; /* 侧边栏高度跟随父容器 */
  flex-shrink: 0; /* 防止侧边栏缩小 */
}

/* 内容部分 */
.content {
  flex: 1; /* 内容区域填满剩余空间 */
  padding: 10px 20px;
  background-color: #fff; /* 示例背景色 */
  overflow-y: auto; /* 如果内容超出则滚动 */
  height: calc(100vh - 60px); /* 计算剩余空间，减去头部的高度 */
  margin-left: 200px; /* 留出侧边栏的空间 */
}

/* 底部部分 */
.footer {
  height: 60px; /* 设定底部高度 */
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  flex-shrink: 0; /* 防止底部被压缩 */
}
</style>
